<template>
    <main>
        <v-header></v-header>
        <nav><img src="../../assets/images/showBar/shop1.webp" alt=""></nav>
        <div class="today">
          <a href="#"  class="titleBar"><p class="barp">今日活动播报<span></span></p></a>
          <div class="picBox">
            <div><img src="../../assets/images/showBar/shop2.webp" alt=""></div>
            <div><img src="../../assets/images/showBar/shop3.webp" alt=""></div>
          </div>
        </div>
        <div class="today today_botm">
          <div class="picBox">
            <div><img src="../../assets/images/showBar/shop4.webp" alt=""></div>
          </div>
        </div>
        <div class="today today_botm_botm">
          <div class="picBox">
            <div><img src="../../assets/images/showBar/shop5.webp" alt=""></div>
          </div>
        </div>

        <!-- -----product------ -->
        <div class="products" v-cloak>
            <div class="kong"></div>
            <a href="#"  class="titleBar"><p class="barp" style="border-left: 4px solid darkpurple;"><i></i>心选精品<span></span></p></a>
            <div class="about">
                <div class="idd">
                    <ul>
                    <li :class="{'active':id == index}" v-for="(item,index) in lists" :key="index" @click="id = index">
                        {{item}}
                    </li>
                    </ul>
                    <!-- -----zh----- -->
                    <div class="showBox animated animate__slideInLeft" v-if="id == 0">
                        <div v-for="(item,index) in zh" :key="index">
                            <div class="img_box"><img :src="item.imgSrc"></div>
                            <p class="f_p">{{item.fP}}</p>
                        </div>
                    </div>
                    <!-- ----jk---- -->
                    <div class="showBox animated animate__slideInLeft" v-if="id == 1">
                        <div v-for="(item,index) in jk" :key="index">
                            <div class="img_box"><img :src="item.imgSrc"></div>
                            <p class="f_p">{{item.fP}}</p>
                        </div>
                    </div>
                    <!-- ----rq---- -->
                    <div class="showBox animated animate__slideInLeft" v-if="id == 2">
                        <div v-for="(item,index) in rq" :key="index">
                            <div class="img_box"><img :src="item.imgSrc"></div>
                            <p class="f_p">{{item.fP}}</p>
                        </div>
                    </div>
                    <!-- ----yz---- -->
                    <div class="showBox animated animate__slideInLeft" v-if="id == 3">
                        <div v-for="(item,index) in yz" :key="index">
                            <div class="img_box"><img :src="item.imgSrc"></div>
                            <p class="f_p">{{item.fP}}</p>
                        </div>
                    </div>
                    <!-- ----hk---- -->
                    <div class="showBox animated animate__slideInLeft" v-if="id == 4">
                        <div v-for="(item,index) in hk" :key="index">
                            <div class="img_box"><img :src="item.imgSrc"></div>
                            <p class="f_p">{{item.fP}}</p>
                        </div>
                    </div>
                    <!-- ----zx---- -->
                    <div class="showBox animated animate__slideInLeft" v-if="id == 5">
                        <div v-for="(item,index) in zx" :key="index">
                            <div class="img_box"><img :src="item.imgSrc"></div>
                            <p class="f_p">{{item.fP}}</p>
                        </div>
                    </div>
                    <!-- -----qc------- -->
                    <div class="showBox animated animate__slideInLeft" v-if="id == 6">
                        <div v-for="(item,index) in qc" :key="index">
                            <div class="img_box"><img :src="item.imgSrc"></div>
                            <p class="f_p">{{item.fP}}</p>
                        </div>
                    </div>
                    <!-- -------sl-------- -->
                    <div class="showBox animated animate__slideInLeft" v-if="id == 7">
                        <div v-for="(item,index) in sl" :key="index">
                            <div class="img_box"><img :src="item.imgSrc"></div>
                            <p class="f_p">{{item.fP}}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
</template>

<script>
import vheader from '../sub/header';

export default{
    components:{
        'v-header':vheader
    },
    data(){
      return{
        id:0,
        lists:['智慧家电','健康抑菌','人气爆款','颜值控','黑科技','成套甄选','青春风尚','送礼"家"品'],
        zh:{},
        jk:{},
        rq:{},
        yz:{},
        hk:{},
        zx:{},
        qc:{},
        sl:{},
      }
    },
    mounted(){
        this.$http.get('./data/xinxuan.json')
      .then((response)=> {
        console.log(response);
        this.zh=response.data.all.slice(0,4);
        this.jk=response.data.all.slice(5,9);
        this.rq=response.data.all.slice(10,14);
        this.yz=response.data.all.slice(15,19);
        this.hk=response.data.all.slice(20,24);
        this.zx=response.data.all.slice(25,29);
        this.qc=response.data.all.slice(30,34);
        this.sl=response.data.all.slice(34,38);
      })
      .catch(function (error) {
        console.log(error);
      })
      .then(function () {
        // always executed
      });
      this.$store.state.msg= "plus";
    }

}
</script>

<style scoped>
[v-cloak]{
    display: none;
}
img{
    width:100%;
}
nav{
    width:100%;
    height:180px;
}
nav>img{
    height:180px;
}
.today{
    width:94%;
    padding:25px 10px;
}
.titleBar{
    width:100%;
    text-decoration: none;
}
.picBox{
    display: flex;
}
.picBox>div:nth-of-type(1){
  margin-right: 10px;
}
.barp{
  padding:5px 0 20px 10px;
  color:black;
  font-weight:600;
  font-size:20px;
}
.barp>i{
  display: inline-block;
  width: 4px;
  height:16px;
  background: darkred;
  margin-right: 10px;
}
.today_botm{
  width:96%;
}
.today_botm_botm{
  width:100%;
  padding:0;
}
.today_botm_botm>.picBox>div:nth-of-type(1){
  margin:0;
}
/* ------product------- */
.products{
        width:100%;
        /* height: 1500px; */
        height:630px;
        /* background:pink; */
    }
.kong{
    width:100%;
    height:40px;
}
.top_title{
    width:100%;
    line-height:44px;
    text-align:center;
    padding:5px 0;
}
.active{
color:#0c5ca8;
font-weight: bolder;
border-bottom:2px solid #0c5ca8;
}
.idd{
width: 100%;
overflow: hidden;
}
.idd>ul{
    display: flex;
    align-items: center;
    overflow:auto;
    padding-left: 0;
    border-bottom:1px solid lightgray;
}
.idd>ul>li{
    text-align: center;
    font-size: 15px;
    padding: 0 10px 3px;
    margin: 0 4px;
    /* -ms-flex-negative: 0; */
    flex-shrink: 0;
}
.showBox{
    width:93%;
    margin:10px 12px;
    display: flex;
    flex-wrap:wrap;
}
.showBox>div{
    width:48%;
    background:rgba(	211, 211 ,211, 0.25);
    margin-bottom: 12px;
    text-align: center;
    box-shadow: 6px 5px 5px #DCDCDC;

}
.showBox>div:nth-of-type(2n){
    margin-left: 12px;
}
.img_box{
    width:117px;
    text-align: center;
    padding:10px 25px;
}
.f_p{
    padding:10px 0;
    font-size:12px;
}


</style>
